import React ,{ PureComponent } from 'react';
import { connect } from 'react-redux';
import {actionCreators} from './store'
import List from './components/List';
import Topic from './components/Topic';
import Recommend from './components/Recommend';
import Writer from './components/Writer';
import {
  HomeWrapper,
  HomeLeft,
  HomeRight,
  BackTop
 } from './style';

class Home extends PureComponent {

// shouldComponentUpate(){
//
//
// }

handleScrollTop(){
  window.scrollTo(0,0);
}

    render(){
      return (
         <HomeWrapper>
             <HomeLeft>
               <img className = 'banner-img' src="//upload.jianshu.io/admin_banners/web_images/4581/8a43bf0089cd31850b7a493412ac1f39d30f1763.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt="540">
               </img>
               <Topic></Topic>
               <List></List>
             </HomeLeft>
             <HomeRight>
                <Recommend></Recommend>
                <Writer></Writer>
             </HomeRight>
             { this.props.showScroll? <BackTop onClick = { this.handleScrollTop }>顶部</BackTop> :null}
         </HomeWrapper>
      )

    }

  componentDidMount () {
    this.props.handleChangeData();
    this.bindEvents();
  }
  componentWillUnmount() {

    window.removeEventListener('scroll',this.props.changeScrollTopShow);
  }

  bindEvents(){
    window.addEventListener('scroll',this.props.changeScrollTopShow);
  }

}

const mapstate = (state) => ({
  showScroll:state.getIn(['home','showScroll'])

});



const mapDispatch = (dispath) =>({
  handleChangeData(){
    dispath(actionCreators.getHomeDateList());
  },

  changeScrollTopShow() {
    if(document.documentElement.scrollTop > 100){
      dispath(actionCreators.toggleTopShow(true));
    }else {
      dispath(actionCreators.toggleTopShow(false));
    }
  }
});

export default connect(mapstate,mapDispatch)(Home);
